<template>
  <div class="container" v-if="luckDrawData.status_type!='end'">
    <div class="meTitle">
      <img src="../../static/images/tabBar/contact.png"/>我的抽奖
    </div>
    <img src="https://file.loveciy.net/uploads/2018/9/15/72dec83ddf4fbca6e81a0df7b1ac75f3.jpg" class="bannerImg" mode="aspectFill"/>

    <div class="imgWrap">
      <form @submit="luckDrawClick($event,luckDrawData.id)" :report-submit="true">
        <!--  <img :src="luckDrawImg ? 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw2.png' : 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw1.png'" class="clickImg" mode="aspectFill" @click="luckDrawClick(luckDrawData.id)"/>  -->
        <button formType="submit" hover-class="none"  class='submit_kong_btn'>
          <img :src="luckDrawImg ? 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw2.png' : 'http://file.rzkeji.com/web/loveciy/img/luckDraw/luckDraw1.png'" class="clickImg" mode="aspectFill" />
        </button>
      </form>
      <img src="http://file.rzkeji.com/web/loveciy/img/luckDraw/increase2.png" class="increase" @click="increaseRate"/>
    </div>

    <div class="improveTip" v-if="tipShow">先点击抽奖再提高中奖率哦</div>
    <div class="processDetails">
      分享提高中奖率，提升中奖率60%<br/>
      每邀请一个好友助力即可提高2％中奖率<br/>
      点击上方按钮，生成专属助力二维码图片
    </div>
    <process :processData="processData"></process>
    <div class="improvePrize">
      <ul class="clickList improveList">
        <li v-for="(imgSrc,index) in supportImgList">
          <img :src="imgSrc" mode="aspectFill"/>
        </li>
      </ul>
      <div class="clickDetails improveDetails">已有{{luckDrawData.support_num}}人参与助力,<span class="fontGreen" @click="lookMore">查看全部 ></span></div>
    </div>
  </div>
</template>

<script>
    import process from '@/components/process'
    export default {
        props:['luckDrawData'],
        components: {
            process
        },

        data () {
            return {
                tipShow:false,
                luckDrawImg:"",
                fromId:""
            }
        },
        computed:{
            supportImgList(){
                if(this.luckDrawData.length!=0){
                    return this.luckDrawData.support_img_list.slice(0,10);
                }
            },
            listId(){
                return this.$store.state.modulesLuck.listId
            },
            processData(){
                if(this.luckDrawData.length!=0){
                    var winning_money = this.luckDrawData.join_info!=null? this.luckDrawData.join_info.winning_odds : 0;
                    return {
                        winning_odds:this.luckDrawData.join_info !=null? this.luckDrawData.join_info.winning_odds : 0,
                        winning:100,
                        winning_money :winning_money + "%",
                        type:"draw"
                    }
                }
            },
            key(){
                return this.$store.state.modulesLuck.key
            }
        },
        watch:{
            luckDrawData:function(newValue,oldValue){
                this.luckDrawImg=newValue.join_info==null ? false : true;
            }
        },
        methods:{
            increaseRate(){
                let luckTip=this.$store.state.modulesLuck.luckTip;
                console.log(this.$store.state.modulesLuck.luckTip)
                if(!luckTip){
                    this.tipShow=true;
                }else{
                    this.$store.dispatch('setCommitBtn',true)
                }
            },
            lookMore(){
                wx.navigateTo({
                    url:`../imagesDetails/main?id=${this.listId}&type=support`
                })
            },
            async luckDrawClick(e,id){
                var formId = e.mp.detail.formId;
                var userToken=wx.getStorageSync('userToken')
                if(this.luckDrawData.join_info==null){  //如果是已经抽奖那就不能点击
                    let res1=await this.$request.postData('https://zlz.loveciy.net/api/activity/set-activity-join',{ad_id:id,user_token:userToken,key:this.key,form_id:formId});
                    if(res1.data.level=="success"){  //如果之前没抽奖，点击后抽奖成功
                        this.luckDrawImg=true;
                        this.$store.dispatch('setLuckTip',true);
                        console.log( this.$store.state.modulesLuck.luckTip)
                        this.tipShow=false;
                        // this$currency.showToast('你已经抽奖过一次了','none',2000)
                        // this.getLuckDrawData();
                    };
                }
            },
        }
    }
</script>

<style scoped>
  .container{width: 100%;height: 100%;}
  .processDetails{width: 351px;margin-left: 12px;font-size: 14px;text-align: center;color: #999;margin-top: 30px;line-height: 25px;}
  .improvePrize{width: 351px;margin-left: 12px;}
  .imgWrap{width: 100%;height: 35.5px;display: flex;justify-content: row;}
  .clickImg{width: 123px;height: 35.5px;display: block;margin-right: 20px;margin-left: 54.5px;}
  .increase{width: 123px;height: 35.5px;display: block;}
  .improveTip{width: 351px;height: 22px;color: red;text-align: center;line-height: 22px;font-size: 12px;}
  .meTitle{width: 96%;height: 24px;padding-left: 4%;font-size: 14px;line-height: 24px;margin-bottom: 15px;}
  .meTitle img{width: 24px;height: 24px;margin-right: 5px;vertical-align: middle;}
  .bannerImg{width: 100%;height: 169px;margin: 10px 0px 20px}
  .improveList{margin-top: 30px;margin-bottom: 10px;}
  .improveDetails{margin-bottom: 30px;}
  .clickList{width: 351px;display: flex;justify-content: row;margin-top: 20px;overflow: hidden;}
  .clickList li{margin-left: 5px;}
  .clickList li img{width: 30px;height: 30px;}
  .clickDetails{width: 190.5px;height: 11.5px;line-height: 11.5px;margin:20px auto ;font-size: 14px;}
  .fontGreen{color: #09A110;}
  .submit_kong_btn{width:100%;height:100%;left:0;top:0;border:none;background:none;}
  .submit_kong_btn::after{ border: none; }
</style>